import React,{PureComponent} from 'react'
import {View,Button,SafeAreaView,Text,StyleSheet,TextInput,ScrollView,Dimensions,TouchableOpacity,Image,FlatList} from 'react-native'
import color from "../../../widget/color";
import PayAlertDialog from '../../../widget/dialog/PayAlertDialog'

import api from '../../../api/api'
import method from '../../../api/method'
import {fetchGetRequest, fetchPostRequest} from '../../../api/NetworkTool'
import {NavigationActions} from "react-navigation";
import MineCacelDetailCourseCell from '../../../widget/mine/MineCacelDetailCourseCell'
import XPay from "react-native-puti-pay";
import Tips from "react-native-root-tips";
// import * as WeChat from "react-native-wechat";
// import Alipay from "react-native-yunpeng-alipay";
const {width, height} = Dimensions.get('window')
import NetTool from "../../../api/NetTool";
import ShoppingCart from "../shopping/ShoppingCart";
import CommonAlertDialog from '../../../widget/dialog/CommonAlertDialog'



export default class MineCancelDetailScene extends PureComponent{
    static navigationOptions = ({navigation}: any) => ({
        headerTintColor:'rgba(0,0,0,0.8)',
        title:'已取消',
        headerRight:<Text/>,
        headerLeft:<TouchableOpacity onPress={()=>{
            navigation.goBack()
        }}>
            <Image style={{marginLeft:12}} source={require('../../../../res/img/gobal_back.png')}/>
        </TouchableOpacity>
    });
    constructor(props){
        super(props)
        this.state = {
            info:{
                order:{},
                course:{},
                address:{},
            },
            courses:[],
            address:{},
            showShop:false,
        }
    }


    componentDidMount() {
        const {orderId} = this.props.navigation.state.params

        let params = {
            orderId:orderId,
        }
        fetchGetRequest(api.getOrderDetail,method.get,params)
            .then(res=>{

                this.setState({info:res,courses:res.course,address:res.address})
            })
            .catch(err=>{})

    }


    render(){

        let address = this.state.address
        let disprice = this.state.info.order.discount
        let yingPrice = (this.state.info.order.amount - this.state.info.order.discount) > 0?(this.state.info.order.amount - this.state.info.order.discount):0
        let dis = (disprice) > 0?-disprice:0
        return (
            <SafeAreaView style={{flex:1}}>
                <ScrollView>
                    <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,paddingTop:15,backgroundColor:'white'}}>
                        <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginBottom:10}}>订单信息</Text>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Text style={styles.text_show}>订单号:</Text>
                            <Text style={styles.text_data}>{this.state.info.order.order_sn}</Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                            <Text style={styles.text_show}>下单时间：</Text>
                            <Text style={styles.text_data}>{this.state.info.order.pay_time}</Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                            <Text style={styles.text_show}>订单状态：</Text>
                            <Text style={styles.text_data}>已取消</Text>
                        </View>
                    </View>
                    <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>

                    <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,backgroundColor:'white'}}>
                        <View style={{flexDirection:'row',alignItems:'center',marginTop:15}}>
                            <Text style={{color:'#111111', fontSize:13, fontWeight:'bold'}}>收货人信息</Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                            <Text style={styles.text_show}>收货人：</Text>
                            <Text style={styles.text_data}>{address.receiver}</Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                            <Text style={styles.text_show}>联系电话：</Text>
                            <Text style={styles.text_data}>{address.mobile}</Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'flex-start',marginTop:10}}>
                            <Text style={[styles.text_show,{marginTop:2}]}>具体地址：</Text>
                            <Text style={[styles.text_data,{width:(width - 100)}]}>{address.city_name + address.address}</Text>
                        </View>
                    </View>
                    <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>
                    <View style={{paddingLeft:12,paddingRight:12,paddingBottom:5,backgroundColor:'white'}}>
                        <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginTop:15}}>课程详情</Text>
                        <FlatList
                            style={{marginTop:5}}
                            data={this.state.courses}
                            renderItem={this.renderCell}
                            keyExtractor={this.keyExtractor}
                            ItemSeparatorComponent={()=><View style={{marginLeft:8,width:width-40,height:1,backgroundColor:'rgba(0,0,0,0.25)'}}/>}
                        />
                    </View>
                    <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>
                    <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,backgroundColor:'white'}}>
                        <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginTop:15}}>结算信息</Text>
                        <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                            <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>订单金额</Text>
                            <View style={{flex:1}}/>
                            <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{this.state.info.order.amount}</Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                            <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>优惠金额</Text>
                            <View style={{flex:1}}/>
                            <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{dis}</Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                            <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>应付金额</Text>
                            <View style={{flex:1}}/>
                            <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{yingPrice}</Text>
                        </View>
                    </View>
                </ScrollView>
                <CommonAlertDialog title={'订单已加入购物车'} onPress={()=>{
                    for (let i = 0; i < this.state.courses.length; i+=2) {
                        let course1 = this.state.courses[i]
                        if ((i+1) >= this.state.courses.length){
                            this.join_shop(course1.id,null)
                        }else {
                            let course2 = this.state.courses[i+1]
                            this.join_shop(course1.id,course2.id)
                        }

                    }
                }} closeModal={(status)=>{
                    this.setState({showShop:status})
                }} confirmTitle={'去订单支付'} show={this.state.showShop}/>

                <View style={{flexDirection:'row',height:50,width:width,}}>
                    <TouchableOpacity onPress={()=>{
                        this.setState({showShop:true})
                    }} style={{backgroundColor:'#DB3853',width:width,alignItems:'center',justifyContent:"center"}}>
                        <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>再次购买</Text>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        )
    }
    join_shop(courseId1,courseId2){

        let params = {
            course:courseId1,
        }
        fetchGetRequest(api.join_shop,method.get,params)
            .then(res=>{
                if (courseId2){
                    this.join_shop1(courseId2)
                }else {
                    this.props.navigation.navigate('ShoppingCart')
                }
            })
            .catch(err=>{
                if (err == '课程已在购物车中，请勿重新添加'){
                    this.props.navigation.navigate('ShoppingCart')
                } else {
                    Tips.showFail(err,{mask:true})
                }
            })
    }
    join_shop1(courseId){

        let params = {
            course:courseId,
        }
        fetchGetRequest(api.join_shop,method.get,params)
            .then(res=>{
            })
            .catch(err=>{
                Tips.showFail(err,{mask:true})
            })
    }
    renderCell = (item: any) => {
        return (
            <MineCacelDetailCourseCell course={item.item} />
        )
    }
    keyExtractor = (item: Object, index: number) => {
        return index + ''
    }
    // confirmOpress(){
    //     const {orderId} = this.props.navigation.state.params
    //
    //     let params = {
    //         orderId:orderId,
    //     }
    //     fetchPostRequest(api.removeOrder,method.post,params)
    //         .then(res=>{
    //             this.props.navigation.goBack()
    //             this.props.navigation.state.params.callback('回调参数')
    //         })
    //         .catch(err=>{})
    // }
    // deleteOrder(){
    //     this.setState({show_alert:true})
    //
    // }
}
const styles = StyleSheet.create({

    text_show:{
        color:'rgba(0,0,0,0.5)',
        fontSize:12,
        fontWeight:'200',
        width:64,
    },
    text_data:{
        fontSize:13,
        color:'black',
        marginLeft:8,
        marginRight:12,
    },
    title_show_jie_e:{
        color:'rgba(0,0,0,0.7)',
        fontWeight:'bold',
        fontSize:12,
    },
    title_data_jie_e:{
        color:'rgba(0,0,0,0.8)',
        fontSize:18,
        fontWeight:'700',
    },
    title_view:{
        flexDirection:'row',
        backgroundColor:'white',
        alignItems:'center',
    },
})